@import "src/assets/styles/variables";
.ss-platform-dynamic-form {
  &-row {
    display: flex;/*border:1px solid #000;*/;/*padding: 5px 0;*//*background: #fff;*/
    &:first-child {
      border-top: 1px solid #ececec;
    }
    &.placeholder {
      background-color: #f5f5f5;min-height: 47px;
    }
  }
  &-cell {
    padding: 8px 0;border-bottom: 1px solid #ececec;flex: 1;min-width: 0;min-height: 0;box-sizing: border-box;position: relative;user-select: none;
    &.current { border-bottom-color: #9ca1c4;}
    &.placeholder {
      background-color: #f5f5f5;min-height: 47px;
      &:hover {background-color: #f5f5f5}
    }
    &.placeholder-active {
      background-color: #f2f6ff;min-height: 46px;border-bottom-color: #9ca1c4;border-bottom-style: dashed!important;
      &:hover {background-color: #f2f6ff}
      * {display: none}
    }
    &:hover {
      border-bottom: 1px solid #9ca1c4;cursor: pointer;
      .setting {display: block;}
    }
    .setting {
      display: none;
      position: absolute;top: 5px;right: 10px;border-radius: 3px;box-shadow: 0 0 2px rgb(0 0 0 / 20%);
      span {
        float: left;height: 22px;line-height: 22px;width: 22px;text-align: center;background-color: #fff;cursor: pointer;
        &:first-child {
          border-top-left-radius: 3px;border-bottom-left-radius: 3px;
        }
        &:last-child {
          border-top-right-radius: 3px;border-bottom-right-radius: 3px;
        }
        @include ssicon(1px, pointer);
        i { font-size: 12px;}
        & + span {
          border-left: 1px solid #ececec;
        }
      }
    }
    .field {
      padding: 0 10px;
      .label {
        margin-bottom: 8px;min-height: 16px;line-height: 16px;
        strong {font-weight: 400;color: #9da1c4;word-break: break-all;}
      }
      .value {
        display: flex;min-height: 30px;font-size: 14px;color: #4b4b4b;
        .placeholder {
          color: #9f9f9f;overflow: hidden;display: block;white-space: nowrap;text-overflow: ellipsis;line-height: 30px;height: 30px;
        }
      }
    }
  }
  &-container {
    padding: 20px 0; /*display: flex;flex-direction: column;*//*flex-grow: 1;flex-basis: 0;max-width: 100%;*//*background: red;*/
    /*border:1px solid red;*/
    &:empty {
      padding-bottom: 20px;
    }
    &.horizontal {
      .setting {top: 12px;}
      .field {display: flex;}
      .label {
        margin-bottom: 0;padding-top: 6px;padding-right: 10px;border-right: 1px solid #ececec;width: 130px;
        min-height: 30px;line-height: 20px;font-size: 14px;box-sizing: border-box;
        & + .value {
          padding-left: 10px;
        }
        .value {flex: 1;min-width: 0;min-height: 0;}
      }
    }
  }
  &-drag {
    position: fixed; pointer-events: none; left: 0px; top: 0px;z-index: 100;transform: translate3d(-100px, -100px, 0px);
    &-cell {
      width: 224px;height: 46px;background-color: rgba(156, 161, 196, .3);
      span {
        padding: 0 10px;height: 46px;line-height: 46px;overflow: hidden;display: block;white-space: nowrap;text-overflow: ellipsis;color: #4b4b4b
      }
    }
    &-tab {
      width: 124px;height: 34px;background-color: rgba(156, 161, 196, .3);
      span {padding: 0 10px;height: 34px;line-height: 34px;color: #4b4b4b;font-size: 14px}
    }
  }
}
